<template>
  <div class="wrap">
    <h3 v-if="state == 'add'">添加门店</h3>
    <h3 v-else-if="state == 'edit'">编辑门店</h3>
    <h3 v-else>查看门店</h3>
    <div>
      <el-form
        ref="bindForm"
        :model="bindForm"
        :rules="rules"
        label-width="120px"
        class="demo-bindForm"
      >
        <el-form-item label="店铺名称" prop="shopName">
          <el-input v-model="bindForm.shopName" class="elInput" disabled />
        </el-form-item>
        <el-form-item label="门店类型" prop="storeType" class="ele-form-item">
          <el-select
            v-model="bindForm.storeType"
            class="elInput"
            :disabled="disabled"
          >
            <el-option value="0" label="老宝贝" />
            <el-option value="1" label="老宝贝自营" />
            <el-option value="2" label="大参林" />
          </el-select>
        </el-form-item>
        <el-form-item label="门店名称" prop="storeName" class="ele-form-item">
          <el-input
            v-model="bindForm.storeName"
            class="elInput"
            maxlength="20"
            minlength="1"
            :disabled="disabled"
            placeholder="输入门店名称"
          />
        </el-form-item>
        <el-form-item
          label="管理员"
          prop="administrators"
          class="ele-form-item"
        >
          <el-input
            v-model="bindForm.administrators"
            maxlength="20"
            minlength="1"
            class="elInput"
            :disabled="disabled"
            placeholder="输入管理员名称"
          />
        </el-form-item>
        <el-form-item
          label="联系方式"
          prop="contactInformation"
          class="ele-form-item"
        >
          <el-input
            v-model="bindForm.contactInformation"
            class="elInput"
            maxlength="11"
            minlength="1"
            :disabled="disabled"
            placeholder="输入管理员微信绑定的账号"
          />
        </el-form-item>
        <el-form-item label="营业时间" required class="ele-form-item">
          <el-col :span="24" class="elInput">
            <el-col :span="13">
              <el-form-item prop="workWeek" class="pickTiem">
                <el-select v-model="bindForm.workWeek" :disabled="disabled">
                  <el-option label="每周一至周五" value="0" />
                  <el-option label="每周一至周六" value="1" />
                  <el-option label="每周一至周日" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10" class="el-col-offset-1">
              <el-form-item prop="pickTiem" class="pickTiem">
                <el-time-picker
                  v-model="bindForm.pickTiem"
                  :disabled="disabled"
                  is-range
                  value-format="HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  @change="timePicker"
                />
              </el-form-item>
            </el-col>
            <!-- <el-date-picker
                v-model="bindForm.pickTiem"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                value-format="yyyy/MM/dd HH:mm:ss"
                :default-time="['08:00:00', '18:00:00']"
                :disabled="$route.params.state == 'show'"
                @change="timePicker"
              />-->
          </el-col>
        </el-form-item>
        <el-form-item label="指定第三方物流" required>
          <el-row :gutter="24">
            <el-col :span="7" style="margin-left: 2.8%">
              <el-form-item prop="logisticsName" class="logisticsName">
                <el-input
                  v-model="bindForm.logisticsName"
                  style="width:100%"
                  class="elInput"
                  maxlength="20"
                  minlength="1"
                  :disabled="disabled"
                  placeholder="物流"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="logisticsInfo">
                <el-input
                  v-model="bindForm.logisticsInfo"
                  style="width:100%"
                  class="phoneInput"
                  maxlength="50"
                  placeholder="输入联系方式"
                  :disabled="disabled"
                /> </el-form-item></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="支持自提" prop="supportSelfDelivery">
          <el-radio
            v-model="bindForm.supportSelfDelivery"
            style="margin-left:5%"
            :disabled="disabled"
            label="1"
          >支持自提</el-radio>
          <el-radio
            v-model="bindForm.supportSelfDelivery"
            label="0"
            :disabled="disabled"
          >不支持</el-radio>
          <el-radio
            v-model="bindForm.supportSelfDelivery"
            label="2"
            :disabled="disabled"
          >仅支持自提</el-radio>
        </el-form-item>
        <el-form-item label="兼职派单机制" required>
          <el-tabs v-model="bindForm.deliveryOrder" style="margin-left: 5%;width: 100%">
            <el-tab-pane label="配货" value="0">
              <el-col :span="24">
                <el-radio v-model="bindForm.distributionMode" :disabled="disabled" label="0">按顺序抢单</el-radio>
              </el-col>
              <el-col :span="24">
                <el-alert
                  title="按照各角色兼职人员顺序派单，发送给一个兼职后10分钟内未接单，自动发送给下一个。"
                  type="info"
                  :closable="false"
                />
              </el-col>
              <el-col :span="24">
                <el-radio v-model="bindForm.distributionMode" :disabled="disabled" label="1">全部一起抢单</el-radio>
              </el-col>
              <el-col :span="24">
                <el-alert
                  title="一次发送给符合条件的全部兼职人员进行抢单。"
                  type="info"
                  :closable="false"
                />
              </el-col>
              <el-col :span="24">
                <el-radio v-model="bindForm.distributionMode" :disabled="disabled" label="2">手动分配</el-radio>
              </el-col>
              <el-col :span="24">
                <el-alert
                  title="由管理人员在后台进行人工分派。"
                  type="info"
                  :closable="false"
                />
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="配送" value="1">
              <el-col :span="24">
                <el-radio v-model="bindForm.automatic" :disabled="disabled" label="0">自动分配</el-radio>
                <el-col :span="24">
                  <el-alert
                    title="由系统自动根据商品设置的方式派单。"
                    type="info"
                    :closable="false"
                  />
                </el-col>
                <el-row v-if="bindForm.automatic=='0'">
                  <el-col :span="22" class="el-col-offset-2">
                    <el-radio v-model="bindForm.deliveryMode" :disabled="disabled" label="0">按顺序抢单</el-radio>
                  </el-col>
                  <el-col :span="22" class="el-col-offset-2">
                    <el-alert
                      title="按照各角色兼职人员顺序派单，发送给一个兼职后10分钟内未接单，自动发送给下一个。"
                      type="info"
                      :closable="false"
                    />
                  </el-col>
                  <el-col :span="22" class="el-col-offset-2">
                    <el-radio v-model="bindForm.deliveryMode" :disabled="disabled" label="1">全部一起抢单</el-radio>
                  </el-col>
                  <el-col :span="22" class="el-col-offset-2">
                    <el-alert
                      title="一次发送给符合条件的全部兼职人员进行抢单。"
                      type="info"
                      :closable="false"
                    />
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="24">
                <el-radio v-model="bindForm.automatic" :disabled="disabled" label="1">手动分配</el-radio>
              </el-col>
              <el-col :span="24">
                <el-alert
                  title="由管理人员在后台进行人工分派。"
                  type="info"
                  :closable="false"
                />
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="维护" value="2">
              <el-col :span="24">
                <el-radio v-model="bindForm.maintainMode" :disabled="disabled" label="0">按顺序抢单</el-radio>
              </el-col>
              <el-col :span="24">
                <el-alert
                  title="按照各角色兼职人员顺序派单，发送给一个兼职后10分钟内未接单，自动发送给下一个。"
                  type="info"
                  :closable="false"
                />
              </el-col>
              <el-col :span="24">
                <el-radio v-model="bindForm.maintainMode" :disabled="disabled" label="1">全部一起抢单</el-radio>
              </el-col>
              <el-col :span="24">
                <el-alert
                  title="一次发送给符合条件的全部兼职人员进行抢单。"
                  type="info"
                  :closable="false"
                />
              </el-col>
              <el-col :span="24">
                <el-radio v-model="bindForm.maintainMode" :disabled="disabled" label="2">手动分配</el-radio>
              </el-col>
              <el-col :span="24">
                <el-alert
                  title="由管理人员在后台进行人工分派。"
                  type="info"
                  :closable="false"
                />
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <el-form-item label="配送范围" prop="distributionRange">
          <div class="elInput">
            方圆<el-input-number v-model="bindForm.distributionRange" :disabled="disabled" placeholder="输入门店商品配送范围" :min="0" :max="1000" :precision="0" :controls="false" />公里
          </div>
        </el-form-item>
        <el-form-item>
          <div class="elInput">
            <el-alert
              title="商品未配置配送范围时，去门店设置的配送范围。"
              type="info"
              :closable="false"
            />
          </div>
        </el-form-item>
        <el-form-item label="门店位置" required>
          <div style="display:flex;margin-left:5.5%">
            <el-form-item prop="provinceCode">
              <el-select
                ref="province"
                v-model="bindForm.provinceCode"
                :disabled="disabled"
                @change="handelProvince"
              >
                <el-option
                  v-for="(item, index) in pca.province"
                  :key="index"
                  :value="item.code"
                  :label="item.name"
                /> </el-select></el-form-item>
            <el-form-item prop="cityCode">
              <el-select
                v-model="bindForm.cityCode"
                :disabled="disabled"
                @change="handelCity"
              >
                <el-option
                  v-for="(item, index) in pca.forCity"
                  :key="index"
                  :value="item.code"
                  :label="item.name"
                /> </el-select></el-form-item>
            <el-form-item prop="areaCode">
              <el-select
                v-model="bindForm.areaCode"
                :disabled="disabled"
                @change="handelArea"
              >
                <el-option
                  v-for="(item, index) in pca.forArea"
                  :key="index"
                  :value="item.code"
                  :label="item.name"
                /> </el-select></el-form-item>
            <el-form-item>
              <el-amap-search-box
                ref="searchBox"
                v-model="bindForm.detailAddress"
                style="border-radius: 5px; border: 1px solid #F3F3F3;height: 36px;"
                :search-option="searchOption"
                :on-search-result="onSearchResult"
              />
            </el-form-item>
          </div>
        </el-form-item>
        <el-amap
          ref="map"
          vid="amapDemo"
          :amap-manager="amapManager"
          :center="center"
          :zoom="zoom"
          :plugin="plugin"
          :events="events"
          class="amap-demo"
          style="height:500px;"
        >
          <el-amap-marker :position="center" />
        </el-amap>
        <el-form-item />
        <el-form-item>
          <el-button
            v-if="state == 'add' || state == 'edit'"
            type="primary"
            class="submitButton"
            @click="submitForm('bindForm')"
          >提交</el-button>
          <el-button type="info" @click="reback">
            返回上一页
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
/** 添加门店 */
import { getCityList } from '@/api/auth'
import { storeAdd, storeDetail } from '@/api/customAPI/shop/store'
import validate from '@/utils/formValidate'
// import { Loading } from 'element-ui'
import VueAMap from 'vue-amap'
const amapManager = new VueAMap.AMapManager()
export default {
  name: 'AddStore',
  data() {
    const self = this
    return {
      // 配送区域
      pca: {
        // 省区
        province: [],
        // 需要循环遍历的城区和市区
        city: [],
        area: [],
        // 最后拿到的 城区和市区 select 列表
        forCity: [],
        forArea: []
      },
      state: '',
      loading: false,
      disabled: false,
      bindForm: {
        workWeek: '',
        shopName: localStorage.getItem('shopName'),
        pickTiem: '',
        storeName: '',
        administrators: '',
        contactInformation: '',
        businessHours: '',
        logisticsName: '',
        logisticsInfo: '',
        provinceId: '',
        provinceName: '',
        cityId: '',
        cityName: '',
        areaId: '',
        areaName: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        detailAddress: '',
        supportSelfDelivery: '1',
        lng: '116.404',
        lat: '39.915',
        distributionRange: null,
        deliveryOrder: null,
        distributionMode: null,
        deliveryMode: null,
        maintainMode: null,
        automatic: null,
        storeType: null
      },
      rules: {
        storeName: [{ required: true, message: '门店名称不能为空', trigger: 'blur' }],
        administrators: [
          { required: true, message: '管理员不能为空', trigger: 'blur' }
        ],
        contactInformation: [
          {
            required: true,
            message: '联系方式不能为空',
            trigger: 'blur'
          },
          {
            message: '请输入正确的十一位手机号',
            trigger: ['blur', 'change'],
            max: 11,
            min: 11,
            validator: validate.validatePhone
          }
        ],
        pickTiem: [
          {
            type: 'array',
            required: true,
            message: '营业时间不能为空',
            trigger: ['blur', 'change']
          }
        ],
        workWeek: [
          {
            required: true,
            message: '每周工作日不能为空',
            trigger: ['change']
          }
        ],
        logisticsName: [
          { required: true, message: '指定第三方物流不能为空', trigger: 'blur' }
        ],
        logisticsInfo: [
          {
            required: true,
            message: '指定第三方物流联系方式不能为空',
            trigger: 'blur'
          }
        ],
        supportSelfDelivery: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        provinceCode: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        cityCode: [{ required: true, message: '请选择市', trigger: 'change' }],
        areaCode: [{ required: true, message: '请选择地区', trigger: 'change' }],
        distributionRange: [{ required: true, message: '请输入配送范围', trigger: 'blur' }],
        storeType: [{ required: true, message: '请输入门店类型', trigger: ['blur', 'change'] }]
      },
      serivce: null,
      nameStr: '',
      /** 高德地图*/
      amapManager,
      zoom: 18,
      markers: [],

      searchOption: {
        city: '杭州',
        citylimit: false
      },
      center: [120.19, 30.26],
      events: {
        init: (o) => {
          o.getCity((result) => {
            console.log(result)
          })
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          const geocoder = new window.AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          this.center = [e.lnglat.lng, e.lnglat.lat]
          geocoder.getAddress(this.center, function(status, result) { // 根据坐标获取位置
            if (status === 'complete' && result.info === 'OK') {
              self.bindForm.detailAddress = result.regeocode.formattedAddress
              self.$refs.searchBox.keyword = self.bindForm.detailAddress
            }
          })
        }
      },
      plugin: [
        {
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          pName: 'Geolocation', // AMap-Geolocation 定位插件
          events: {
            init(o) {
              // getCurrentPosition 获取当前位置的方法
              // 注意 虽然进页面就会调用这个方法，但是data()中center要有默认值，不然会报错
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  const lng = result.position.lng
                  const lat = result.position.lat
                  if (self.center[0] == 120.19 && self.center[1] == 30.26 && !self.bindForm.detailAddress) {
                    self.center = [lng, lat]
                    self.bindForm.detailAddress = result.formattedAddress
                    console.log(self.center)
                    self.loaded = true
                    self.zoom = 18
                    self.$nextTick()
                  }
                }
              })
            }
          }
        }
      ]
    }
  },
  watch: {
    'bindForm.automatic': {
      handler(newValue, oldValue) {
        if (this.bindForm.automatic == '1') {
          this.bindForm.deliveryMode = '2'
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.loadCity()
  },
  activated() {
    this.loadCity()
  },
  methods: {
    /** 初始化信息 */
    inititalInfo() {
      const params = this.$dd(this.$route.query.p)
      this.state = params.state
      if (
        params.state === 'edit' ||
        params.state === 'show'
      ) {
        storeDetail({ storeId: params.storeId }).then(
          result => {
            console.log(result.data.data)
            if (this.state === 'show') {
              this.disabled = true
            }
            this.bindForm.pickTiem = result.data.data.businessTime
              ? result.data.data.businessTime.split('-')
              : ''
            this.bindForm.storeType = result.data.data.storeType.toString()
            this.bindForm.storeId = localStorage.getItem('storeId')
            this.bindForm.storeName = result.data.data.storeName
              ? result.data.data.storeName
              : ''
            this.bindForm.administrators = result.data.data.userName
              ? result.data.data.userName
              : ''
            this.bindForm.contactInformation = result.data.data.phone
              ? result.data.data.phone
              : ''
            this.bindForm.detailAddress = result.data.data.addressDetail
              ? result.data.data.addressDetail
              : ''
            this.bindForm.workWeek = result.data.data.workWeek.toString()
            this.bindForm.supportSelfDelivery = result.data.data.supportSelfDelivery.toString()
            this.bindForm.logisticsName = result.data.data.thirdLogisticsName
              ? result.data.data.thirdLogisticsName
              : ''
            this.bindForm.logisticsInfo = result.data.data.thirdLogisticsPhone
              ? result.data.data.thirdLogisticsPhone
              : ''
            // 省市区处理
            this.bindForm.provinceCode = result.data.data.provinceId

            this.bindForm.cityCode = result.data.data.cityId

            this.bindForm.areaCode = result.data.data.areaId

            this.pca.province.forEach(inf => {
              if (inf.code == this.bindForm.provinceCode) {
                this.bindForm.provinceId = inf.id
                this.bindForm.provinceName = inf.name
              }
            })

            this.pca.city.forEach(inf => {
              if (inf.pid == this.bindForm.provinceId) {
                this.pca.forCity.push(inf)
              }
              if (inf.code == this.bindForm.cityCode) {
                this.bindForm.cityId = inf.id
                this.bindForm.cityName = inf.name
              }
            })

            this.pca.area.forEach(inf => {
              if (inf.pid == this.bindForm.cityId) {
                this.pca.forArea.push(inf)
              }
              if (inf.code == this.bindForm.areaCode) {
                this.bindForm.areaId = inf.id
                this.bindForm.areaName = inf.name
              }
            })
            this.bindForm.distributionMode = result.data.data.distributionMode.toString()
            this.bindForm.deliveryMode = result.data.data.deliveryMode.toString()
            if (this.bindForm.deliveryMode == '0' || this.bindForm.deliveryMode == '1') {
              this.bindForm.automatic = '0'
            } else if (this.bindForm.deliveryMode == '2') {
              this.bindForm.automatic = '1'
            }
            this.bindForm.maintainMode = result.data.data.maintainMode.toString()
            this.bindForm.distributionRange = result.data.data.distributionRange
            /** --分割线-- */
            this.bindForm.lat = result.data.data.lat ? result.data.data.lat : ''
            this.bindForm.lng = result.data.data.lng ? result.data.data.lng : ''
            this.center = [this.bindForm.lng, this.bindForm.lat]
            this.$nextTick(() => {
              /* this.$refs.citySelect.setAddress(result.data.data.chargeProvinceName, result.data.data.chargeCityName, result.data.data.chargeAreaName)
              this.bindForm.chargeProvinceName = result.data.data.chargeProvinceName
              this.bindForm.chargeProvinceId = result.data.data.chargeProvinceId
              this.bindForm.chargeCityName = result.data.data.chargeCityName
              this.bindForm.chargeCityId = result.data.data.chargeCityId
              this.bindForm.chargeAreaName = result.data.data.chargeAreaName
              this.bindForm.chargeAreaId = result.data.data.chargeAreaId*/
              this.$refs.searchBox.keyword = this.bindForm.detailAddress
              /* this.bindForm.chargeDeliveryAddress = result.data.data.chargeDeliveryAddress
              this.$refs.chargeSearchBox.keyword = this.bindForm.chargeDeliveryAddress
              this.bindForm.chargeLat = result.data.data.chargeLat
              this.bindForm.chargeLng = result.data.data.chargeLng
              this.chargeCenter = [this.bindForm.chargeLng, this.bindForm.chargeLat]*/
              this.provinceCity()
            })
          }
        )
      }
    },
    timePicker(v) {
      console.log(v)
    },
    reback() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    /** 提交 */
    submitForm(vali) {
      const params = this.$dd(this.$route.query.p)
      this.loading = true
      this.$refs[vali].validate(v => {
        if (v) {
          this.bindForm.businessHours = this.bindForm.pickTiem
            .toString()
            .replace(',', '-')
          console.log(this.bindForm.detailAddress)
          if (!this.bindForm.detailAddress) {
            return this.$message.error('详细地址不能为空')
          }
          if (this.bindForm.automatic && !this.bindForm.deliveryMode) {
            return this.$message.error('请选择自动发货方式')
          }
          switch (params.state) {
            case 'add':
              this.submit()
              break
            case 'edit':
              this.bindForm.storeId = params.storeId
              this.submit()
              break
            default:
              this.submit()
              break
          }
        } else {
          this.loading = false
        }
      })
    },
    submit() {
      const data = this.$XEUtils.clone(this.bindForm, true)
      data.provinceId = this.bindForm.provinceCode
      data.cityId = this.bindForm.cityCode
      data.areaId = this.bindForm.areaCode

      delete data.deliveryOrder
      if (data.cityName === data.provinceName) {
        data.cityName = '市辖区'
      }
      if (!data.distributionMode) {
        return this.$message.error('请选择配货派单机制')
      }
      if (!data.deliveryMode) {
        return this.$message.error('请选择配送派单机制')
      }
      if (!data.maintainMode) {
        return this.$message.error('请选择维护派单机制')
      }
      /* if (!data.address.province) {
        return this.$message.error('请选择收发货地址的省份')
      }
      if (!data.address.city) {
        return this.$message.error('请选择收发货地址的城市')
      }
      if (!data.address.village) {
        return this.$message.error('请选择收发货地址的区域')
      }*/
      delete data.provinceCode
      delete data.cityCode
      delete data.areaCode
      delete data.automatic
      if (data.lat == '39.915' && data.lng == '116.404') {
        return this.$message.error('请在地图上单击确认门店具体地址')
      }
      delete data.address
      console.log(data)
      storeAdd(data)
        .then(result => {
          this.$message.success('成功')
          this.loading = false
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.go(-1)
        })
        .catch(() => {
          this.loading = false
        })
    },
    /** 区 */
    handelArea(v) {
      console.log(v, '区id')
      if (v) {
        this.bindForm.areaName = this.pca.area.find(inf => {
          return inf.code === v
        }).name
        this.bindForm.areaId = this.pca.area.find(inf => {
          return inf.code === v
        }).code
        this.addressName()
      }
    },
    /** 市 */
    handelCity(v) {
      if (v) {
        this.pca.forArea = []
        this.bindForm.areaName = ''
        this.bindForm.areaId = ''
        this.bindForm.areaCode = null
        const cityInfo = this.$XEUtils.find(this.pca.city, item => item.code === v)
        this.pca.area.forEach(inf => {
          if (inf.pid === cityInfo.id) {
            this.pca.forArea.push(inf)
          }
        })
        this.bindForm.cityName = this.pca.city.find(inf => {
          return inf.code === v
        }).name
        this.bindForm.cityId = this.pca.city.find(inf => {
          return inf.code === v
        }).code
        this.addressName()
      }
    },
    /** 省 */
    handelProvince(v) {
      this.pca.forCity = []
      this.pca.forArea = []
      this.bindForm.cityId = ''
      this.bindForm.areaId = ''
      this.bindForm.cityCode = null
      this.bindForm.areaCode = null
      if (v) {
        const provinceInfo = this.$XEUtils.find(this.pca.province, item => item.code === v)
        this.pca.city.forEach(inf => {
          if (inf.pid === provinceInfo.id) {
            this.pca.forCity.push(inf)
          }
        })

        this.bindForm.cityName = ''
        this.bindForm.areaName = ''
        this.bindForm.detailAddress = ''
        this.bindForm.provinceName = this.pca.province.find(inf => {
          return inf.code === v
        }).name
        this.bindForm.provinceId = this.pca.province.find(inf => {
          return inf.code === v
        }).id
        this.bindForm.provinceCode = this.pca.province.find(inf => {
          return inf.code === v
        }).code
        this.addressName()
      }
    },
    addressName() {
      this.bindForm.detailAddress = ''
      if (this.bindForm.cityName == this.bindForm.provinceName || this.bindForm.cityName == '市辖区') {
        this.bindForm.detailAddress =
          this.bindForm.provinceName +
          this.bindForm.areaName
      }
    },
    /** 修改时初始化 */
    provinceCity() {
      this.pca.forCiry = []
      this.pca.forArea = []
      this.pca.city.forEach(inf => {
        if (inf.pid === this.bindForm.provinceCode) {
          this.pca.forCiry.push(inf)
        }
      })
      this.pca.area.forEach(inf => {
        if (inf.pid === this.bindForm.cityCode) {
          this.pca.forArea.push(inf)
        }
      })
    },
    /** 初始地址 */
    loadCity() {
      getCityList()
        .then(result => {
          this.pca.province = []
          this.pca.city = []
          this.pca.area = []
          result.data.data.forEach(inf => {
            this.pca.province.push(inf.province)
            inf.cityRegion.forEach(reg => {
              this.pca.city.push(reg.city) // 拿市区
              reg.village.forEach(vil => {
                this.pca.area.push(vil) // 拿城区
              })
            })
          })
          this.inititalInfo()
        })
        .catch(err => {
          console.log(err)
        })
    },
    /** 点击搜索后触发的事件 */
    onSearchResult(pois) {
      if (pois.length > 0) {
        pois.forEach(item => {
          if (this.$refs.searchBox.keyword == item.name) {
            this.center = [item.lng, item.lat]
          } else {
            // 这边类似模糊查询 会返回一个数组，我就直接取第一个值了。
            this.center = [pois[0].lng, pois[0].lat]
          }
        })
      }
      this.bindForm.detailAddress = this.$refs.searchBox.keyword
      this.bindForm.lng = this.center[0]
      this.bindForm.lat = this.center[1]
    }
  },

  /* beforeRouteEnter(to, from, next) {
    if (to.$dd(this.$route.query.p).state === 'show') {
      to.meta.title = '查看门店'
    } else if (to.$dd(this.$route.query.p).state === 'edit') {
      to.meta.title = '编辑门店'
    } else {
      to.meta.title = '添加门店'
    }
    next()
  },*/
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('tagsView/delView', from)
    next()
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  min-width: 1700px;
  padding: 50px 100px;
  h3 {
    background: #f6f6f6;
    padding: 20px 0 20px 10px;
  }
  .elInput {
    width: 25%;
    margin-left: 5%;
  }
  .phoneInput {
    width: 15%;
    margin-left: 1%;
  }
  .addressInput {
    width: 30%;
    margin-left: 2%;
  }
  .select {
    width: 7%;
    margin-left: 2%;
  }
  .select:nth-of-type(1) {
    margin-left: 5%;
  }
  .submitButton {
    width: 8%;
    margin: 50px 0 0 5%;
  }
  ::v-deep.el-form {
    padding-left: 20px;
    .el-form-item__label {
      width: 120px !important;
      text-align: left;
    }
    .logisticsName {
      .el-form-item__error {
        margin-left: 5%;
      }
    }
    .el-form-item {
      .baidu-map {
        width: 100%;
        height: 400px;
        padding-left: 5.5%;
      }
    }
    .ele-form-item {
      .el-form-item__error {
        margin-left: 90px;
      }
      .pickTiem {
        .el-form-item__error {
          margin-left: 0px;
          width: 120px;
        }
      }
    }
  }
}
</style>
